<template>
	<view class="my">
		<image src="../../static/img/config/bull-bg.png" mode=""></image>
		<view class="container">
			<!-- <image src="" mode="aspectFit"></image> -->
			<!-- 名字即头像和设置 -->
			<u--image :showLoading="true" src="../../static/img/my/setting.png" width="50upx" height="50upx" class="setting" @click="hanleSetting"></u--image>
			<view class="people_cont">
				<u-avatar src="../../static/logo.png" shape="circle" size="75" @click="hanleLogin"></u-avatar>
			</view>
			<view class="name text-center margin-top">腾格里塔拉</view>

			<!-- 举报container -->
			<view class="report_cont flex flex text-center justify-between">
				<view class="item flex-direction items-center par flex">
					<u--image :showLoading="true" src="../../static/img/my/mine_like.png" class="marg-icon" shape="circle" width="50upx" height="50upx"></u--image>
					<view class="">我的举报</view>
					<view class="flex font justify-center">
						12
						<view class="font-end">起</view>
					</view>
				</view>

				<view class="item flex flex-direction items-center par">
					<u--image :showLoading="true" src="../../static/img/my/line.png" class="pos_line" width="3upx" height="150upx"></u--image>
					<u--image :showLoading="true" src="../../static/img/my/money.png" shape="circle" class="marg-icon" width="50upx" height="50upx"></u--image>
					<view class="flex flex-direction">累计举报收入</view>
					<view class="flex font justify-center">
						2050
						<view class="font-end">元</view>
					</view>
				</view>
				<view class="item flex flex-direction items-center par">
					<u--image :showLoading="true" src="../../static/img/my/line.png" class="pos_line" width="3upx" height="150upx"></u--image>
					<u--image :showLoading="true" src="../../static/img/my/mine_time.png" shape="circle" class="marg-icon" width="50upx" height="50upx"></u--image>
					<view class="">待处理</view>
					<view class="flex font justify-center">
						2050
						<view class="font-end">起</view>
					</view>
				</view>
			</view>

			<!-- 我的钱包 -->
			<view class="money-cont">
				<view class="flex justify-between align-center cu-tabbar-height text-xl padding-top">
					<view class="font-weight">我的钱包</view>
					<view class="bg-white mColor" @click="hanleDrawal">提现</view>
				</view>
				<view class="flex font-w m-top">
					<view class="margin-right-2">￥</view>
					2,000.00
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		// 设置
		hanleSetting() {
			uni.navigateTo({
				url: '/pages/setting/setting'
			});
		},
		// 登录
		hanleLogin(){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		},
		// 提现
		hanleDrawal(){
			uni.navigateTo({
				url:'/pages/my/withdrawal'
			})
		},

	}
};
</script>

<style lang="scss" scoped>
.pos_line {
	position: absolute;
	left: -45upx;
}
.font-w {
	font-weight: 900;
	font-size: 40upx;
}
.m-top {
	margin-top: 100upx;
}
.font-weight {
	font-weight: 700;
}
.par {
	position: relative;
}
.font {
	font-size: 32upx;
	font-weight: 900;
}
.font-end {
	font-size: 20upx;
	position: relative;
	bottom: -12upx;
	font-weight: 400;
	right: -8upx;
}
.cu-tabbar-height {
	height: 100upx;
}
.bg-white {
	width: 150upx;
	text-align: center;
	border-radius: 50upx;
	height: 60upx;
	font-size: 35upx;
	line-height: 60upx;
}
.marg-icon {
	margin: 0 auto;
}
.items-center {
	justify-content: center;
}
.report_cont {
	height: 200upx;
	margin: 30upx auto;
	background: url(../../static/img/my/my-Base.png) no-repeat 0 0;
	background-size: cover;
}
.money-cont,
.report_cont {
	color: white;
	width: 85%;
	padding: 0 30upx;
	border-radius: 40upx;
}
.money-cont {
	margin: 15upx auto;
	height: 300upx;
	background: url(../../static/img/my/money_bg.png) 0upx 0upx;
	background-size: cover;
}
.margin-top {
	margin-top: 100upx;
	font-size: 42upx;
	width: 100%;
	text-align: center;
}
.people_cont {
	width: 150upx;
	height: 150upx;
	background-color: #f9e9e8;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	margin-left: -75upx;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -75upx;
}


.setting {
	position: absolute;
	z-index: 100;
	top: -100upx;
	right: 60upx;
}
.my {
	position: relative;
	width: 100%;
	height: 100%;
	image {
		width: 100%;
	}
	.container {
		width: 100%;
		min-height: 50vh;
		z-index: 1;
		position: absolute;
		background-color: white;
		border-radius: 60upx 60upx 0 0;
		top: 50%;
	}
}
</style>
